<template>
  <el-card class="box-card  el-card-flex">
    <div slot="header" class="clearfix">
      <span>用户组授权</span>
      <el-input clearable placeholder="请搜索..." v-model="textSearch" style="width: 210px; float: right"
        @keyup.enter.native="searchTabeleEnter" @clear="searchTabeleEnter">
        <el-button slot="append" icon="el-icon-search" @click="searchTabeleEnter"></el-button>
      </el-input>
    </div>
    <div class="text item el-over-auto">
      <el-form :model="roleNameForm" ref="roleNameForm" class="el-flex">
        <el-checkbox-group v-model="checkedProject" class='import-check'>
          <el-checkbox class="roleCheckbox" border v-for="item in systemOptions" :label="item.userGroupId" :key="item.userGroupId">
            <div class='inner-text'>
              <span :title="item.userGroupName">{{item.userGroupName}}</span>
            </div>
          </el-checkbox>
        </el-checkbox-group>
      </el-form>
    </div>
    </div>
    <div style="text-align: right;margin-bottom: 8px;margin-right: 8px;">
      <el-button type="primary" @click="funcSaveEvt">
        确定
        <i class="el-icon-document-checked el-icon--right"></i>
      </el-button>
      <el-button @click="cancelEvt">
        取消
        <i class="el-icon-refresh-left"></i>
      </el-button>
    </div>
  </el-card>
</template>
<script>
  import {
    Dialog,
    Table,
    TableColumn,
    MessageBox,
    Message,
    TabPane,
    Collapse,
    CollapseItem,
    Tag
  } from 'element-ui'
  import {
    userGroupsList,
    addUserGroupAuth
  } from '@/api/authority/userManage/userGroupNames.js'
  export default {
    name: "roleGroupNames",
    components: {
      'el-dialog': Dialog, // 对话框
      'el-table': Table, // 表格
      'el-table-column': TableColumn, // 表格列
      'el-tab-pane': TabPane, // 标签页
      'el-collapse': Collapse, // 折叠面板
      'el-collapse-item': CollapseItem, // 折叠面板列
      'el-tag': Tag // 标签
    },
    data() {
      return {
        roleNameForm: {},
        textSearch: '', // 搜索model值
        searchData: '', // 存储搜索来的数据
        checkedProject: [], //已经选择的数据源
        systemOptions: [], //角色数据源
        rowDat: {}, //行数据
        ids: [], //rolesId
      }
    },
    mounted() {
      this.systemOptionsEvent()
      this.rowDat = this.$route.params.rowData
    },
    methods: {
      //获取所有角色
      systemOptionsEvent() {
        let data = {
          'type': 3
        }
        userGroupsList(data).then(res => {
          this.systemOptions = res.data.data.records
          this.systemOptions.forEach(item => {
            if (this.rowDat.userGroupNameArr) {
              this.rowDat.userGroupNameArr.forEach(itemT => {
                if (itemT == item.userGroupName) {
                  this.checkedProject.push(item.userGroupId)
                }
              })
            } else {
              this.checkedProject = []
            }

          })
        })
      },
      // 回车搜索事件
      searchTabeleEnter() {
        if (this.textSearch) { // 有数据,是要搜索
          let data = {
            "type": 1,
            "groupName": this.textSearch
          }
          userGroupsList(data).then(res => {
            this.systemOptions = res.data.data.records

          })
        } else { // 搜索输入框是空的,说明是要重置,不搜索了,展示正常的全部数据
          this.textSearch = ''
          let data = {
            'type': 1
          }
          userGroupsList(data).then(res => {
            this.systemOptions = res.data.data.records
          })
        }
      },
      funcSaveEvt() { //确认事件
        var userid = []
        userid.push(this.rowDat.userAccountId)
        let data = {
          "id": this.checkedProject,
          "userIds": userid
        }
        addUserGroupAuth(data).then(res => {
          if (res.data.code == 10000) {
            this.$router.go(-1) // 后退
          }
        })
      },
      cancelEvt() { //取消事件
        this.$router.go(-1) // 后退
      }
    }
  }
</script>
<style lang="scss">
 .import-check {
   .is-bordered {
     margin-top: 10px!important;
     margin-bottom: 10px!important;
     margin-left: 10px!important;
     margin-right: 10px!important;
   }
 }

 .roleCheckbox {
   padding: 20px 15px 5px 20px !important;
   border-radius: 4px !important;
   height: 114px !important;
   width: 220px !important;

   .el-checkbox__inner {
     height: 14px !important;
     width: 14px !important;
   }

   .inner-text {
     font-size: 14px;
     position: relative;
     top: 30px;
     width: 210px;
     left:-45px;
     text-align: center;
     overflow: hidden;
     text-overflow:ellipsis;
     padding-right:  5px;
     padding-left:  5px;
   }
 }
</style>
